<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单线程</title>
</head>
<body>
    <button id='click'> click</button>
    <div id='content'></div>
         
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        // js单线程
        //     js运行在浏览器中，是单线程的，代码运行按先后顺序依次执行，但是当其中一段发生阻塞，后续的代码将

        // 浏览器多进程
        //     浏览器是事件驱动的，浏览器中很多行为是异步的，通过这些行为浏览器会创建事件并放入执行队列中，等待当前代码执行完成后，在处理任务队列,

        //     javascript引擎线程
        //     界面渲染线程
        //     浏览器事件触发线程
        //     Http请求线程等


        $(function(){
            // 单线程
            function fun() {
                console.log( 'A' );
                console.log( 'B' );
                // setTimeout(function(){ 
                //     console.log( 'B' ); 
                // } , 0);
            }
            for (var i = 0; i < 10; i++) {
                fun();
            }


// 浏览器多进程

            $('#click').on('click', function(){
                $('#content').text('内容111111111'); 
                
                long();//执行长时间任务，阻塞
                
                // setTimeout(long,50); //用定时器，大约50ms以后执行长时间任务，放入执行队列，但在redraw之后了，根据先进先出原则
                
            })
            
            function long(){
                var result = 0
                for (var i = 0; i<1000; i++){
                    for (var j = 0; j<1000; j++){
                        for (var k = 0; k<1000; k++){
                            result =result+ i+j+k
                        }
                    } 
                }
                $('#content').text('内容222222222') 
            }


//      非阻塞js的实现
            //      js在浏览器中需要被下载、解释并执行这三步。在html body标签中的script都是阻塞的。
            //      也就是说，顺序下载、解释、执行。尽管Chrome可以实现多线程并行下载外部资源，
            //      例如：script file、image、frame等（css比较复杂，在IE中不阻塞下载，但Firefox阻塞下载）。
            //      但是，由于js是单线程的，所以尽管浏览器可以并发加快js的下载，但必须依次执行。
            //      所以chrome中image图片资源是可以并发下载的，但外部js文件并发下载没有多大意义。

            // 一种办法是HTML5的defer和async关键字：

            // 第二种方法是动态加载js
            // setTimeout(function(){
            //     var script = document.createElement("script");
            //     script.type = "text/javascript";
            //     script.src = "foo.js";
            //     var head = true; //加在头还是尾
            //     if(head){
            //         document.getElementsByTagName("head")[0].appendChild(script);
            //     }else{
            //         document.body.appendChild(script);
            //     } 
            // }, 0);

        })
    </script>
    
</body>
</html>